<template>
  <div class="feedback">
    <!-- 内容 -->
    <div class="content">
      <!-- 盒子 -->
      <div class="box">
        <!-- 标题 -->
        <div class="title">意见与反馈</div>
        <!-- 留言 -->
        <div class="info">
          <van-field v-model="message" rows="3" autosize label="留言" type="textarea" maxlength="150" placeholder="请填写你的意见和反馈" show-word-limit />
        </div>
        <!-- 联系方式 -->
        <div class="tel">
          <van-field v-model="tel" type="tel" label="联系方式:" placeholder="邮箱/手机号/微信号" />
        </div>
        <!-- 提交 -->
        <div class="submit" @click="submitEvents">提交</div>
      </div>
    </div>
  </div>
</template>

<script>
import { submitAction } from "@/api/my";
export default {
  data() {
    return {
      tel: "", // 联系方式
      message: "", // 留言
      userInfo: {}, // 用户信息
    };
  },
  // 计算
  computed: {},
  // 创建
  created() {
    // 获取用户信息
    this.userInfo = localStorage.getItem("userInfo");
  },
  // 准备
  mounted() {},
  // 方法
  methods: {
    // 提交
    submitEvents() {
      // var _this = this;
      // 意见反馈
      submitAction({
        content: this.message,
        name: this.userInfo.nickName,
        openId: this.userInfo.openId,
        phone: this.tel,
      }).then((res) => {
        this.$toast({
          message: "提交成功",
          icon: "none",
          duration: 2000,
          forbidClick: true,
        });
        // 2秒后清空留言和联系方式
        setTimeout(() => {
          this.message = "";
          this.tel = "";
        }, 2000);
      });
    },
  },
};
</script>

<style lang='scss' scoped>
.feedback {
  .content {
    width: 100%;
    position: absolute;
    top: 46px;
    left: 0;
    bottom: 0;
    background-color: #fff;
    border-top: 0.8px solid #d9d9d9;
    // 盒子
    .box {
      padding: 0 10px;
      // 标题
      .title {
        padding: 10px 0;
        border-bottom: 1px solid #d9d9d9;
      }
      // 留言
      .info {
        border-bottom: 1px solid #d9d9d9;
      }
      // 联系方式
      .tel {
        border-bottom: 1px solid #d9d9d9;
      }
      // 提交
      .submit {
        width: 95%;
        height: 50px;
        color: #fff;
        font-size: 16px;
        line-height: 50px;
        margin: 50px auto 0;
        background: #b4282d;
        border-radius: 5px;
      }
    }
  }
}
</style>